<template>
  <div style="position: relative;height: 50%;margin-bottom: 15px;">
    <span class="recognition" style="position: absolute;top: 18px;left: 15px;z-index: 999;"></span>
    <div id="echart4" class="echarts-style">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeAgeechart',
    props: ['cureCharts'],
    data() {
      return {
        myChart4: null,
        option: {
          title: [{
            text: `本年度每月反馈次数占比`,
            left: 30,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#333333",
              fontSize: 18,
            },
          }, {
            text: "单位：次",
            right: 20,
            textStyle: {
              fontWeight: 400,
              lineHeight: 34,
              color: "#333333",
              fontSize: 18,
            }
          }],
          color: ["#667FCC", "#EF0C27", "#FEE7EA"],
          xAxis: {
            type: 'category',
            data: [],
          },

          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          series: [{
            name: '治疗数量',
            itemStyle: {
              barBorderRadius: [6, 6, 0, 0], // 重点
            },
            data: [],
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  type: 'linear', //设置区域线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#74B7FF' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#FBFDFF' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                },
              }
            },
            smooth: true
          }]
        }
      }
    },
    watch: {
      cureCharts: {
        handler(newVal, oldName) {
          let dataList = []
          let xList = []
          let data = [...newVal]
          xList = data.map(item => {
            dataList.push({
              value: item.ct,
              name: item.model.split('-')[1]
            })
            return item.model.split('-')[1]+'月'
          })
          this.option.series[0].data = dataList
          this.option.xAxis.data = xList
          this.myChart4 && this.myChart4.setOption(this.option);
        },
        //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
        immediate: true,
        deep: true // 开启深度监听，默认是false
      },
    },
    mounted() {
      this.initCurecharts()
      window.addEventListener("resize", () => {
        this.myChart4.resize()
      })
    },
    methods: {
      initCurecharts() {

        this.myChart4 = this.$echarts.init(
          document.getElementById("echart4")
        );
        this.myChart4.setOption(this.option);

      },
    }
  }
</script>
<style lang="scss">
  .echarts-style {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #E3E3E5;
    padding: 6px;
  }

  .recognition {
    display: inline-block;
    width: 6px;
    height: 18px;
    background: #78AEF9;
    border-radius: 2px;
    margin-right: 13px;
  }
</style>
